<template>
	<view class="my-wallet">
		<NavBar title="骑手信息" color="#fff" bgc="#FF3B1E"/>
		<view class="top-nav"> </view>
		<view class="content">
			<view class="rider-info">
				<view class="rider-avatar">
					<image :src="riderInfo?.avatar" class="avatar"  @tap="previewImg([riderInfo?.avatar])"/>
					<view class="status" :class="riderInfo?.on_line==1?'a-status':''"> {{riderInfo?.on_line==1?'在线中':'休息中'}} </view>
				</view>
				<view class="rider-name"> {{riderInfo?.name}} </view>
				<view class="rider-phone"> {{riderInfo?.mobile}} </view>
				<view class="rider-order"> 
					<view class="order"> 总订单：{{riderInfo?.order_num}} </view>
					<view class="hp">
						<view class="text"> 好评率： </view>
						<BFB :bfb="riderInfo?.score_y + '%'" />
					</view>
				</view>
			</view>
			<view class="job">
				<view class="item">
					<view class="label"> 工作城市 </view>
					<view class="value"> {{riderInfo?.region}} </view>
				</view>
				<view class="item">
					<view class="label"> 工作地点 </view>
					<view class="value"> {{riderInfo?.region_info}} </view>
				</view>
				<view class="item">
					<view class="label"> 证件号 </view>
					<view class="value"> {{riderInfo?.id_code}} </view>
				</view>
				<view class="id-box">
					<view class="id-name"> 证件 </view>
					<view class="id">
						<view class="id-item" @tap="previewImg([riderInfo?.id_img_1])">
							<image :src="riderInfo?.id_img_1" :style="{height:h}" class="i-img"/>
							<view> 身份证正面 </view>
						</view>
						<view class="id-item" @tap="previewImg([riderInfo?.id_img_2])">
							<image :src="riderInfo?.id_img_2" :style="{height:h}" class="i-img"/>
							<view> 身份证反面 </view>
						</view>
						<view class="id-item" @tap="previewImg([riderInfo?.id_img_3])">
							<image :src="riderInfo?.id_img_3" :style="{height:h}" class="i-img"/>
							<view> 手持身份证 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import BFB from '@/components/BFB.vue'
	import { previewImg } from '@/utils/index.js'
	import { GetRiderInfoApi } from '@/service/agent.js'
	const { safeArea } = uni.getSystemInfoSync()
	const h = computed(() => ((safeArea.width - 66) / 2) / 1.56 + 'px' )
	const riderInfo = ref()
	onLoad((e) => {
		const { id, info } = e
		GetRiderInfoApi({id}).then(res => {
			riderInfo.value = {
				...res,
				...JSON.parse(info)
			}
		})
	})
</script>

<style scoped lang="scss">
	.my-wallet {
		.top-nav {
			height: 190px;
			background: linear-gradient( 360deg, rgba(253,181,108,0) 3%, #FFA37E 26%, #FF3B1E 97%);
		}
		.content {
			padding: 0px 12px;
			box-sizing: border-box;
			transform: translateY(-142px);
			.rider-info {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: space-between;
				text-align: center;
				height: 225px;
				padding: 20px 10px 18px;
				background: url('/static/icon/agent/top-bg.png') no-repeat center center;
				background-size: 100% 100%;
				box-sizing: border-box;
				.rider-avatar {
					width: 80px;
					height: 80px;
					position: relative;
					margin-bottom: 15px;
					.avatar {
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}
					.status {
						position: absolute;
						bottom: 0;
						left: 50%;
						width: 34px;
						height: 16px;
						color: #FFFFFF;
						font-size: 10px;
						font-weight: 400;
						background: #999999;
						border-radius: 2px 2px 2px 2px;
						transform: translate(-50%, 50%);
						&.a-status {
							background-color: #4CD964;
						}
					}
				}
				.rider-name {
					color: #333333;
					font-size: 17px;
					font-weight: 500;
					line-height: 22px;
				}
				.rider-phone {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
				}
				.rider-order {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.order {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 16px;
					}
					.hp {
						display: flex;
						align-items: center;
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						line-height: 17px;
					}
				}
			}
			.job {
				margin-top: 10px;
				padding: 0 12px;
				border-radius: 10px;
				background-color: #FFFFFF;
				.item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
					}
					.value {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
					}
				}
				.id-box {
					padding: 20px 4px;
					box-sizing: border-box;
					.id-name {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						line-height: 20px;
						margin-bottom: 19px;
					}
					.id {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: 10px;
						box-sizing: border-box;
						.id-item {
							text-align: center;
							.i-img {
								width: 100%;
								margin-bottom: 6px;
							}
							view {
								color: #999999;
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;
							}
						}
					}
				}
			}
		}
	}
</style>
